<template>
    <div class="right">
        <div class="right-top">
            <div class="lesson"><span class="active">浏览记录</span></div>
        </div>
        <div class="right-bottom">
            <div class="operate">
                <div class="search">
                    <el-input
                        v-model="input"
                        style="width: 90%"
                        class="searchValue"
                        prefix-icon="Search"
                    />
                    <el-button type="info" plain @click="searchKeyword">搜索</el-button>
                </div>
                <div class="delete" v-if="flag" @click="flag = false">批量删除</div>
                <div class="threeDelete" v-else>
                    <div @click="flag = true">取消</div>
                    <div @click="confirmDel">确定</div>
                    <div @click="allNotSelect" v-if="allOrNot">取消全选</div>
                    <div @click="allSelect" v-else>全选</div>
                </div>
            </div>
            <div class="videolist">
                <el-table class="video" :show-header="false" :data="historyList">
                    <el-table-column width="169" #default="{ row }">
                        <a :href="`https://www.dance365.com/detail/video?momentId=${row.momentId}`">
                            <img class="img" :src="row.momentBackup.cover[0]" alt="" />
                        </a>
                    </el-table-column>
                    <el-table-column #default="{ row }">
                        <div class="column">
                            <div class="name">
                                <a
                                    :href="`https://www.dance365.com/detail/video?momentId=${row.momentId}`"
                                >
                                    {{ row.momentTitle }}
                                </a>
                            </div>
                            <div class="time">专题</div>
                            <div class="title">
                                <img :src="row.momentBackup.creatorBackup.avatar" alt="" />
                                <div class="author">{{ row.momentBackup.creatorBackup.name }}</div>
                            </div>
                        </div>
                    </el-table-column>
                    <el-table-column #default="{ row }" width="150px">
                        {{ row.createTime }}
                    </el-table-column>
                    <el-table-column #default="{ row, $index }" width="100px">
                        <span class="deleteonce" @click="deleteHistory($index)" v-if="flag">
                            删除
                        </span>
                        <span class="checkIcon" v-else>
                            <el-icon @click="checkDelete(row)" :class="{ active: row.isSelect }">
                                <SuccessFilled />
                            </el-icon>
                        </span>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import mockApi, { type ResContentModel } from '@/api/mockApi';
import moment from 'moment';
import { ElMessage, ElMessageBox } from 'element-plus';
const input = ref('');
const historyList = ref<ResContentModel[]>([]);
const flag = ref(true);
const deleteArr = ref<string[]>([]);
// 修改日期
const formatTime = (time: number) => {
    if (!time || time < 0) return '';
    const days = moment().diff(moment(time).startOf('day'), 'days');
    if (days === 0) return moment(time).format('HH:mm');
    if (days === 1) return `昨天 ${moment(time).format('HH:mm')}`;
    return moment(time).format('MM-DD HH:mm');
};
// 单个删除
const deleteHistory = (index: number) => {
    ElMessageBox.confirm('此操作将删除该项, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            historyList.value?.splice(index, 1);
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            });
        });
};
const searchKeyword = () => {
    if (!input.value) reqHistoryList();
    historyList.value = historyList.value.filter(item => {
        return item.momentTitle.indexOf(input.value) !== -1;
    });
};
// 获取历史列表
const reqHistoryList = async () => {
    try {
        let { data } = await mockApi.reqData();
        data.content.forEach(item => {
            item.createTime = formatTime(item.createTime as number);
            item.isSelect = false;
        });
        historyList.value = data.content;
    } catch (error) {
        console.log(error);
    }
};
// 全选
const allSelect = () => {
    historyList.value.forEach(item => {
        item.isSelect = true;
        checkDelete(item);
    });
};
// 取消全选
const allNotSelect = () => {
    historyList.value.forEach(item => {
        item.isSelect = false;
    });
};
// 选中
const checkDelete = (row: ResContentModel) => {
    row.isSelect = true;
    deleteArr.value.push(row.id);
};
// 确定删除
const confirmDel = () => {
    ElMessageBox.confirm('此操作将删除该项, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            historyList.value = historyList.value.filter(item => {
                return !deleteArr.value.includes(item.id);
            });
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            });
        });
};
let allOrNot = computed(() => {
    return historyList.value.every(item => item.isSelect);
});
onMounted(() => {
    reqHistoryList();
});
</script>

<style scoped lang="less">
.right {
    width: 1020px;
    display: block;

    margin-left: 10px;
    // padding: 0 30px;
}
.right-top {
    display: flex;
    // background-color: blueviolet;
    position: relative;
    background-color: #fff;
    // padding-left: 30px;
    border-radius: 4px;
}
.creat {
    position: absolute;
    top: 30px;
    right: 110px;
}
.lesson {
    float: left;
    padding: 28px 30px;
    color: #111;
    font-size: 14px;
    position: relative;
    height: 20px;
    text-align: center;
    line-height: 20px;
}
.lesson > span {
    padding: 7px 0px;
    border-radius: 7px;
}
.right-bottom {
    // height: 700px;
    // background-color: burlywood;
    margin-top: 10px;
    position: relative;
    background-color: #fff;
    padding: 0 20px;
}
.operate {
    position: absolute;
    top: 10px;
    width: 100%;
    display: flex;
    margin: 10px;
    position: relative;
    margin-bottom: 30px;
}
.search {
    width: 380px;
    display: flex;
    margin-right: 14px;
    height: 40px;
}
:deep(.el-input__wrapper) {
    display: block;
    height: 40px;
    width: 270px;
}
:deep(.el-button--info.is-plain) {
    height: 42px;
    margin-left: 10px;
}
.delete {
    display: block;
    position: absolute;
    top: 13px;
    right: 100px;
}
.checkIcon {
    color: rgb(216, 211, 211);
    font-size: 22px;
}
.checkIcon .active {
    color: #f93684;
}
.threeDelete {
    display: flex;
    width: 200px;
    justify-content: space-around;
    position: absolute;
    top: 10px;
    right: 70px;
    color: #f93684;
}
.video {
    width: 963px;
}
.video .img {
    width: 169px;
    height: 101px;
}
.video .column {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    height: 101px;
    cursor: pointer;
}
.video .column .name {
    font-weight: 700;
    font-size: 16px;
    color: #111;
}
a {
    text-decoration: none;
    color: black;
}
.title > img {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    margin-right: 15px;
}
.video .column .time {
}
.video .column .title {
    display: flex;
    float: left;
}
.author {
    line-height: 30px;
}
.video .deleteonce {
    opacity: 0.8;
}
.video .deleteonce:hover {
    cursor: pointer;
    color: red;
}
:deep(.el-input__inner) {
    width: 90%;
}
</style>
